<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/web/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阡陌网关</title>
  <style>
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading {
            width: 50px;
            height: 50px;
            position: relative;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            animation: rotate 1s linear infinite, fade 1s ease-in-out infinite;
            animation-fill-mode: forwards;
        }

        .ball:nth-child(1) {
            transform: translate(-50%, -50%) rotate(0deg) translateX(20px);
            background: rgb(52, 127, 219);
        }

        .ball:nth-child(2) {
            transform: translate(-50%, -50%) rotate(90deg) translateX(20px);
            background: rgba(52, 127, 219, 0.75);
            animation-delay: -0.75s;
        }

        .ball:nth-child(3) {
            transform: translate(-50%, -50%) rotate(180deg) translateX(20px);
            background: rgba(52, 127, 219, 0.5);
            animation-delay: -0.5s;
        }

        .ball:nth-child(4) {
            transform: translate(-50%, -50%) rotate(270deg) translateX(20px);
            background: rgba(52, 127, 219, 0.25);
            animation-delay: -0.25s;
        }

        @keyframes rotate {
            from {
                transform: translate(-50%, -50%) rotate(0deg) translateX(15px)
                rotate(0deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(360deg) translateX(15px)
                rotate(-360deg);
            }
        }

        @keyframes fade {
            0%,
            100% {
                opacity: 0.2;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
  <script type="module" crossorigin src="/web/js/index-Cyof_eZU.js"></script>
  <link rel="stylesheet" crossorigin href="/web/css/index-C-LsXErD.css">
</head>

<body>
<div id="app">
    <div class="loading-overlay">
        <div class="loading">
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
        </div>
    </div>
</div>
</body>
</html>